<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林木森</title>
</head>
<style>
    body, *{
        margin: 0px;
        padding: 0px;
    }
    
    .top{
        width: 100%;
        height: 50px;
        border-top: 3px solid black;
        background-image: linear-gradient(yellow, rgba(226, 226, 0, 0.733));
        position: relative;
    }
    .top img{
        float: left;
        margin-left: 2%;
    }
    .top ul{
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        width: 600px;
        height: 50px    ;
        margin: auto;
        float: left;
    }
    .top ul li{
        float: left;
        list-style: none;
        line-height:50px;
        margin-left: 25px;
    }
    .top ul li img{
        margin-left: 0px;
        margin-top: 10px;
    }
    .top a{
        color: black;
        text-decoration: none;
    }
    .top a:hover{
        color: red;
        text-decoration: underline;
    }
    .img1{
        margin-top: 12px;
        width: 30px;
        height: 25px;
    }
    .top p{
        margin-left: 5%;
        float: left;
        line-height: 50px;
    }
    .top_right{
        width: 200px;
        height: 50px;
      
        float: right;
    }
</style>


<style>
    .banner{
    position: relative;/*相对定位 给绝对定位位置参考*/
    width: 100%;
    height: 300px;
    float: left;
    margin-top: 25px;
    margin-bottom: 20px;
    }
    .banner .item{
    display: none;/*隐藏元素*/
    position: absolute;/* 绝对定位*/
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    }
    ul{
    list-style-type: none;/*清除默认列表样式 ....*/
    margin: 0;
    padding: 0;/*内外编剧清除*/
    }
    .lunbo{
    width: 100%;
    height: 300px;
    }
    /*左右按钮的属性设置*/
    .lr-tab .btn{
    position: absolute;
    top: 120px;
    width: 41px;
    height: 69px;
    background: url("img/8a.png");

    }
    .lr-tab .left{
    left: 0px;
    background-position-x: -83px;

    }
    .lr-tab .right{
    right: 0px;
    background-position-x: -125px;
    }
    /*左右按钮触碰事件*/
    .lr-tab .left:hover{
    background-position-x: 0px;
    }
    .lr-tab .right:hover{
    background-position-x: -41px;
    }
    /*圆形按钮属性设定*/
    .tab-btn{
    position: absolute;
    right: 40px;
    bottom: 20px;
    width: 120px;
    height: 30px;
    top: 270px;

    }
    .tab-btn .btn{

    float: left;
    width: 6px;
    height: 6px;
    background: #868686;
    border: 2px solid #c3c3c3;/*边框*/
    margin-left: 10px;
    border-radius: 50%;
    }
    /*圆形按钮触碰事件*/
    .tab-btn .btn:hover{
    background: #e4e4e4;
    border-color:#7f7f7f;
    }
    .tab-btn .active{
    background: #e4e4e4;
    border-color:#7f7f7f;
    }
</style>



<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var index2 = 0;/*初始化一个变量 指向下彪*/
        //点击点
        $(".tab-btn .btn").click(function () {
            index2 = $(this).index();//获取点击该元素下彪
            $(this).addClass("active").siblings().removeClass("active");
            $(".item").eq(index2).fadeIn().siblings().fadeOut();
        });
        //点击切换效果
        $(".lr-tab .right").click(function () {
            index2 ++;
            if (index2 >4){ index2 = 0;}
            $(".item").eq(index2).fadeIn().siblings().fadeOut();
            $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

        });
        $(".lr-tab .left").click(function () {
            index2 --;
            if(index2 < 0){index2 = 4;}
            $(".item").eq(index2).fadeIn().siblings().fadeOut();
            $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

        });
        var time2 = setInterval(function () {
            index2 ++;
            if (index2 >4){ index2 = 0;}
            $(".item").eq(index2).fadeIn().siblings().fadeOut();
            $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

        },4000); //定时器 重复
    </script>

<body>
    <div class="top">
        <a href="#"><img src="img/Logo.png" ></a>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">商城</a></li>
            <li><a href="#">职位</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">正版素材</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#"><img src="img/dian.png"></a></li>
        </ul>
        <div class="top_right">
            <a href="#" ><img class="img1" src="img/Socpo.png" ></a>
            <a href="#" ><img class="img1" src="img/home.png" ></a>
            <p><a href="#">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">注册</a></p>
        </div>
    </div>
    
    <div class="banner" >
        <div class="img-wrap">
            <ul>
                <li class="item" style="display: block">
                    <a href="#"><img src="img/img2.jpg" alt="" class="lunbo"></a>
                </li>
                <li class="item">
                    <a href="#"><img src="img/img3.jpg" alt="" class="lunbo"></a>
                </li>
                <li class="item">
                    <a href="#"><img src="img/img4.jpg" alt=""class="lunbo"></a>
                </li>
                <li class="item">
                    <a href="#"><img src="img/img5.jpg" alt="" class="lunbo"></a>
                </li>
                <li class="item">
                    <a href="#"><img src="img/img2.jpg" alt="" class="lunbo"></a>
                </li>
           </ul>
       </div>
    <div class="lr-tab">
           <div class="left btn"></div>
           <div class="right btn"></div>
       </div>
       <div class="tab-btn">
       <ul>
           <li class="btn"></li>
           <li class="btn"></li>
           <li class="btn"></li>
           <li class="btn"></li>
           <li class="btn"></li>
       </ul>
       </div>
   </div>

</body>
</html>